<template>
  <div id="coupon">
    <div class="feature">
      <h4>查询</h4>
      <div :model="formInline">
        <el-button type="primary"
                   class="elb"
                   @click="onSearch">搜索</el-button>
        <el-input placeholder="请输入内容"
                  class="Oin"
                  v-model="formInline.search"></el-input>
      </div>
    </div>
    <!-- <div class="check">
      <el-button type="primary">筛选</el-button>
      <el-select v-model="select" slot="prepend" placeholder="选择优惠卷类型">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
      <el-select v-model="select" slot="prepend" placeholder="选择时间区域">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
      <el-select v-model="select" slot="prepend" placeholder="选择时间区域">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
      <el-select v-model="select" slot="prepend" placeholder="悬着优惠卷类型">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
    </div> -->
    <div class="add clear">
      <h4 :style="{marginLeft:'20px'}">优惠卷类型</h4>
      <el-button type="primary"
                 @click="add">新增优惠卷</el-button>
    </div>
    <div>
      <el-table :data="newTable"
                stripe
                style="width: 100%"
                :cell-style="{border:'1px solid #DCDCDC'}"
                :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
        <el-table-column prop="dis_id"
                         label="序号"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_name"
                         label="优惠名称"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_money"
                         label="面值"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_conditions"
                         label="使用条件"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_time"
                         label="有效时间"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_amount"
                         label="数量"
                         width="80"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_effctive_state"
                         label="生效状态"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_publish_state"
                         label="发布状态"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column prop="user_name"
                         label="操作人"
                         width="80"
                         align='center'>
        </el-table-column>
        <el-table-column prop="dis_note"
                         label="备注"
                         width="100"
                         align='center'>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         align='center'>
          <template slot-scope="scope"
                    id="bto">
            <el-button @click="revise(scope.row)"
                       type="text"
                       size="small">查看</el-button>
            <el-button type="text"
                       size="small"
                       @click="edit(scope.row)"
                       :style="
                scope.row.dis_publish_state == '已生效'
                  ? { display: 'none' }
                  : { display: 'inline-block', margin: '5px' }
              ">编辑</el-button>
            <el-button type="text"
                       size="small"
                       @click="del(scope.row)"
                       :style="
                scope.row.dis_publish_state == '已生效'
                  ? { display: 'none' }
                  : { display: 'inline-block', margin: '5px' }
              ">删除</el-button>
            <el-button type="text"
                       size="small"
                       @click="send({ ...scope.row, del: 'release' })"
                       :style="
                scope.row.dis_publish_state == '已生效'
                  ? { display: 'none' }
                  : { display: 'inline-block', margin: '5px' }
              ">发布</el-button>
            <el-button type="text"
                       size="small"
                       @click="send({ ...scope.row, del: 'rel' })"
                       :style="
                scope.row.dis_publish_state == '未生效'
                  ? { display: 'none' }
                  : { display: 'inline-block', margin: '5px' }
              ">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="pageTatol"
                     @current-change="pageChange"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <div>
      <el-dialog :title="tite"
                 :visible.sync="dialogFormVisible">
        <el-form :model="reviseData">
          <el-form-item label="序号"
                        :style="{ display: conter }"
                        v-show="hideC">
            <el-input v-model="reviseData.dis_id"
                      autocomplete="off"
                      :disabled="hideB"></el-input>
          </el-form-item>
          <el-form-item label="优惠名称">
            <el-input v-model="reviseData.dis_name"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
          <el-form-item label="请选择优惠劵类型">
            <el-select v-model="reviseData.dis_name"
                       placeholder="请选择优惠劵类型">
              <el-option label="满减劵"
                         value="满减劵"></el-option>
              <el-option label="折扣劵"
                         value="折扣劵"></el-option>
              <el-option label="赠送劵"
                         value="赠送劵"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="面值">
            <el-input v-model="reviseData.dis_money"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
          <el-form-item label="使用条件">
            <el-input v-model="reviseData.dis_conditions"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
          <el-form-item label="有效时间">
            <!-- <el-input
              v-model="reviseData.dis_time"
              autocomplete="off"
              :disabled="hideA"
            ></el-input> -->
            <el-date-picker v-model="reviseData.dis_time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="reviseData.dis_amount"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
          <el-form-item label="生效状态">
            <el-input v-model="reviseData.dis_effctive_state"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-input v-model="reviseData.dis_publish_state"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
          <el-form-item label="操作人">
            <el-input v-model="reviseData.user_name"
                      autocomplete="off"
                      :disabled="hideB"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="reviseData.dis_note"
                      autocomplete="off"
                      :disabled="hideA"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="send({ ...reviseData, del: pending })"
                     v-show="hide">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <!-- 此处是弹出框 -->
      <el-dialog title="提示"
                 :visible.sync="centerDialogVisible"
                 width="30%"
                 center>
        <span>是否删除该条数据</span>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="send({ ...Tdel, del: 'del' })">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data () {
    return {
      page: 1,
      count: 5,
      hide: false,
      hideA: false,
      hideB: true,
      hideC: true,
      formInline: {
        search: "",
      },
      search: "",
      dbData: [],
      reviseData: {
        dis_id: "",
        dis_name: "",
        dis_money: "",
        dis_conditions: "",
        dis_time: "",
        dis_amount: "",
        dis_effctive_state: "",
        dis_publish_state: "",
        user_name: "",
        dis_note: "",
      },
      formInline: {
        search: "",
      },
      tite: "查看数据",
      dialogFormVisible: false,
      centerDialogVisible: false,
      Tdel: {},
      conter: "block",
      pending: "refer",
    };
  },
  methods: {
    ...mapActions("coupon", { jia: "jia", send: "send" }),
    onSearch () {
      if (this.formInline.search.trim()) {
        this.search = this.formInline.search;
      } else {
        this.search = "";
      }
      console.log(this.search);
    },
    add (m) {
      this.dialogFormVisible = true;
      this.tite = "添加优惠卷";
      this.hide = true;
      this.hideC = false;
      this.hideB = false;
      this.hideC = false;
      this.pending = "increase";
      this.reviseData = {};
    },
    pageChange (n) {
      this.page = n;
    },
    pageTatol (n) {
      this.count = n;
    },
    revise (n) {
      //查看功能不包括修改
      this.dialogFormVisible = true;
      this.tite = "查看数据";
      this.hideA = true;
      this.hideB = true;
      this.hideC = true;
      this.hide = false;
      this.reviseData = { ...n };
    },
    edit (n) {
      this.dialogFormVisible = true;
      this.pending = "refer";
      this.tite = "修改数据";
      this.hide = true;
      this.hideA = false;
      this.hideB = true;
      this.hideC = true;
      this.reviseData = { ...n };
    },
    tooltip (m) {
      if (m == "发布成功") {
        this.$message({
          type: "success",
          message: "发布成功",
        });
        m = "";
      }
      if (m == "发布失败") {
        this.$message({
          type: "info",
          message: "发布失败",
        });
      }
      if (m == "下架成功") {
        this.$message({
          type: "success",
          message: "下架成功",
        });
      }
      if (m == "下架失败") {
        this.$message({
          type: "info",
          message: "下架失败",
        });
      }
      if (m == "编辑成功") {
        this.dialogFormVisible = false;
        this.$message({
          type: "success",
          message: "编辑成功",
        });
      }
      if (m == "编辑失败") {
        this.$message({
          type: "info",
          message: "编辑失败",
        });
      }
      if (m == "删除成功") {
        this.centerDialogVisible = false;
        if (this.newTable.length / 5 == 0 && this.newTable.length >= 0) {
          this.page--;
        }
        this.$message({
          type: "success",
          message: "删除成功",
        });
      }
      if (m == "删除失败") {
        this.$message({
          type: "info",
          message: "删除失败",
        });
      }
    },
    del (m) {
      this.centerDialogVisible = true;
      this.Tdel = m;
      // console.log(this.Tdel)
    },
  },
  computed: {
    changeTable () {
      let tab = this.$store.state.coupon.c;
      console.log(tab);
      return tab.slice((this.page - 1) * this.count, this.page * this.count);
    },
    total () {
      let sum = this.$store.state.coupon.c;
      if (this.search) {
        let arr = sum.filter((v) => {
          if (v.dis_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.length;
      } else {
        return sum.length;
      }
    },
    newTable () {
      let tab = this.$store.state.coupon.c;
      let oDate = new Date();
      let Y = oDate.getFullYear();
      let M = oDate.getMonth();
      let d = oDate.getDate();
      let datN = Number(Y + "" + (M + 1) + "" + d);
      console.log(datN);
      for (let i = 0; i < tab.length; i++) {
        // tab[i]["Release"] = "未生效";
        let now = tab[i].dis_time
          .split("-", 2)[1]
          .replace("/", "")
          .replace("/", "");
        let nowA = tab[i].dis_time
          .split("-", 2)[0]
          .replace("/", "")
          .replace("/", "");
        now > datN
          ? (tab[i].dis_effctive_state = "未过期")
          : (tab[i].dis_effctive_state = "已过期");
        // nowA > datN
        //   ? (tab[i].dis_publish_state = "未生效")
        //   : (tab[i].dis_publish_state = "已生效");//判定方式改变暂时不用
        // nowA > datN
        //   ? (tab[i]["Release"] = "未生效")
        //   : (tab[i]["Release"] = "生效");
        tab[i].dis_effctive_state == "未过期"
          ? (this.ok = "")
          : (this.ok = "yes");
      }

      // console.log( tab.slice(10,15))
      if (this.search) {
        let arr = tab.filter((v) => {
          console.log(v.dis_name)
          if (v.dis_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.slice((this.page - 1) * this.count, this.page * this.count);
      } else {
        return tab.slice((this.page - 1) * this.count, this.page * this.count);
      }
    },
  },
  created () {
    this.jia();
  },
  mounted () { },
  updated () {
    let m = this.$store.state.coupon.d;
    if (m == "发布成功") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "下架成功") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "发布失败") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "编辑成功") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "编辑失败") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "删除成功") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "删除失败") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
  },
};
</script>
<style scoped lang='less'>
.feature {
  h4 {
    height: 50px;
    line-height: 50px;
    text-align: left;
  }
  div {
    height: 100px;
    line-height: 100px;
    text-align: left;
    .Oin {
      width: 200px;
      margin-left: 20px;
    }
  }
}
.check {
  line-height: 0px;
  text-align: left;
  .el-select {
    margin-left: 20px;
  }
}
.add {
  height: 50px;
  background: #f0f0f0;
  margin-bottom: 10px;

  margin-top: 20px;
  h4 {
    float: left;
    line-height: 50px;
  }
  .el-button {
    float: right;
    width: 120px !important;
  }
}
#bto {
  color: red;
  .el-button {
    margin-left: 0px !important;
  }
}
#coupon {
  button {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
  .block {
    text-align: center;
  }
  .elb {
    width: 80px;
  }
}
</style>